<template>
	<view class="weight">
		<view class="layout">
			<view class="acea-row row-middle row-between nav-bg">
				<scroll-view scroll-x="true" style="white-space: nowrap; display: flex;" scroll-with-animation
					:scroll-left="tabLeft" show-scrollbar="true">
					<view class="item" :class="index===categoryOn?'item-on':''" v-for="(item,index) in categoryList"
						:style='"width:"+isWidth+"px"' :key="index" @click="categoryNavClick(item,index)">
						<view class="acea-row row-middle row-center img">
							<image :src="item.icon" mode=""></image>
							
						</view>
						<view class="name">
							{{item.name}}
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="sort-box" style="margin-bottom: 20rpx;">
				<scroll-view scroll-x="true" style="white-space: nowrap; display: flex;">
					<template v-for="(item,index) in sortList">
						<view :key="index" :class="['sort',sortOn==index?'sort-on':'']"
							@click="sortClick(index,item.status)">{{item.name}}</view>
					</template>
				</scroll-view>
			</view>
			<view style="flex: 1;overflow: auto;">
				<supplyChainSub v-if="sortList[sortOn].status == 0" :edit-id="editId" :itemList="itemList" @resetCategory="resetCategory"/>
				<supplyChainBeg v-else :edit-id="editId" :itemList="itemList" @resetCategory="resetCategory" />
			</view>
			<!-- <view style="padding: 12rpx;"></view> -->

		</view>
	</view>
</template>

<script>
	import {
		getclassificationListApi
	} from '@/api/brand/index.js'
	import {
		dictionary
	} from "@/api/subletOfShop.js"
	import supplyChainSub from '../components/supply/supplyChainSub.vue'
	import supplyChainBeg from '../components/supply/supplyChainBeg.vue'
	export default {
		components: {
			supplyChainSub,
			supplyChainBeg
		},
		data() {
			return {
				isWidth: 40,
				isLeft: 0,
				tabLeft: 0,
				types: [{
					name: '品牌入驻'
				}, {
					name: '申请加盟'
				}],
				unitShow: false,
				typeOn: 1,
				categoryList: [],
				dataForm: {},
				categoryOn: 0,
				dwList: [],
				advantages: [],
				contactList: [],
				title: '',
				tabLeft: 0,
				editId: '',
				maxLength: 200,
				index: 0,
				sortIndex: 0,
				storeAdvantage: [],
				itemList: [],
				popupShow: false,
				supplementText: '',
				advantageIds: [],
				needToResetCategory: false,
				sortOn: 0,
				sortList: [{
					name: '供应链',
					status: 0
				}, {
					name: '求供应链',
					status: 1
				}],
			};
		},
		onLoad(option) {
			this.sortOn = option.type?option.type:0;
			this.editId = option.id ? option.id : '';
			
			// this.dataform.brandId = option.brandId || null;
			this.getSupplyList(option.id)
		},
		created() {
			var that = this
			// 获取设备宽度
			uni.getSystemInfo({
				success(e) {
					that.isWidth = e.windowWidth / 6
				}
			})
		},
		methods: {
			async getSupplyList(id) {
				try {
					let res = await getclassificationListApi({
						status: 1
					});
					this.categoryList = res.data;
					if (this.needToResetCategory) {
						this.resetCategory(this.needToResetCategory)
					} else {
						this.itemList = this.categoryList[0].children;
					}
					// console.log("this.categoryList",this.categoryList)
					// this.itemList = this.categoryList[0].children;
				} catch (e) {
					console.log("eeeee", e)
				} finally {

				}
			},
			sortClick(index, status) {
				this.sortOn = index;
			},
			resetCategory(id) {
				if (this.categoryList.length < 1) {
					this.needToResetCategory = id;
					return;
				}
				this.categoryOn = this.categoryList.findIndex(item => item.children && item.children.findIndex(it => it
					.id == id) > -1);
				this.itemList = this.categoryList.filter(item => item.children && item.children.findIndex(it => it.id ==
					id) > -1)[0].children;
				this.needToResetCategory = '';
			},
			// 导航栏点击
			categoryNavClick(item, index) {
				// let title = '发布-'+item.name+this.types[this.typeOn].name
				// uni.setNavigationBarTitle({
				// 	title:title
				// })
				if (this.categoryList.length > 6) {
					var tempIndex = index - 2;
					tempIndex = tempIndex <= 0 ? 0 : tempIndex;
					this.tabLeft = (index - 2) * this.isWidth //设置下划线位置
				}
				this.categoryOn = index //设置导航点击了哪一个
				this.isLeft = index * this.isWidth //设置下划线位置
				this.itemList = this.categoryList[this.categoryOn].children ? this.categoryList[this.categoryOn].children :
					[],
					this.dataForm.goodsCate = '';
				this.dataForm.goodsCateName = ''
			},


		}
	}
</script>

<style lang="scss">
	@import '/static/css/releaseForm.css';

	.nav-bg {
		background: #ffffff;
		padding: 18rpx 20rpx 36rpx;

		.item~.item {
			// margin-left: 48rpx;
		}

		.item {
			display: inline-block;
			white-space: nowrap;
			text-align: center;
			.img {
				width: 75rpx;
				height: 75rpx;
				border-radius: 50%;
				background: #ffffff;
				margin: 0 auto;

				image {
					width: 100%;
					height: 100%;
				}
			}
			
			.name {
				display: inline-block;
				// min-width: 70rpx;
				font-size: 26rpx;
				font-weight: 700;
				line-height: 40rpx;
				color: rgba(0, 0, 0, 1);
				text-align: center;
			}
			
		}

		.item-on {
			.img {
				background: rgba(247, 247, 247, 1);
			}

			.name {
				position: relative;
				color: rgba(239, 39, 50, 1);
				font-weight: 700;
				&::after{
					content: '';
					position: absolute;
					left: 0;
					bottom: 0;
					width: 100%;
					height: 50%;
					background-color:rgba(239, 39, 50, .2);
					border-radius: 10rpx;
				}
			}
		}
	}

	.type-bg {
		padding: 24rpx 30rpx;
		background: rgba(247, 248, 250, 1);

		.type~.type {
			margin-left: 18rpx;
		}

		.type {
			padding: 6rpx 24rpx;
			border-radius: 10rpx;
			border: 1px solid rgba(229, 229, 229, 1);
			font-size: 32rpx;
			font-weight: 400;
			color: rgba(128, 128, 128, 1);
		}

		.type-on {
			border: 1px solid rgba(238, 33, 45, 1);
			background: rgba(238, 33, 45, 1);
			color: #ffffff;

		}
	}

	.layout {
		display: flex;
		flex-direction: column;
		height: 100vh;

		.scroll-Y {
			height: 100%;
		}

		.scroll {
			overflow-y: auto;
			flex: 1;
		}
	}

	.sort-box {
		display: flex;
		width: 100%;
		padding: 0rpx 30rpx 18rpx;
		background: #ffffff;

		.sort {
			display: inline-block;
			white-space: nowrap;
			border-radius: 10rpx;
			background: rgba(247, 247, 247, 1);
			padding: 12rpx 36rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: rgba(50, 50, 51, 1);
			margin-right: 18rpx;
		}

		.sort-on {
			color: #ffffff;
			background: rgba(238, 33, 45, 1);
		}
	}

	// 列表
	.list {
		padding: 0 32rpx 0;

		.item {
			margin-bottom: 32rpx;
			border-radius: 10rpx;
			background: #ffffff;
			padding: 24rpx;
			overflow: hidden;

			.top-info {
				margin-bottom: 16rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(191, 186, 186, 1);

				.close {
					font-size: 36rpx;
				}
			}

		}
	}
</style>